<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<script>
    window.onload()
    {
        var  value  = '${books.bookImg}';
        alert(value);
        if (value != null) {
            var imgarr = value.split(','),
                t = "";
            for (var i = 0; i < imgarr.length - 1; i++) {
                alert(imgarr[i]);
                $('#bookImgWrap').append('<img src="' + imgarr[i] + '" alt="' + file.name +
                    'style="max-height: 100px;max-height: 100px;margin: 3px 3px 1px 5px;border: solid 1px lightslategray">');
            }
        } else {
            '<span class="label label-success">暂无图片</span>';
        }
    }
</script>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="signupForm">
                        <input id="bookId" name="bookId" th:value="${books.bookId}" type="hidden">
                        <div class="form-group" hidden>
                            <label class="col-sm-3 control-label">用户id：</label>
                            <div class="col-sm-8">
                                <input id="userId" name="userId" th:value="${books.userId}" class="form-control"
                                       type="text" readonly="readonly">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">图书名称：</label>
                            <div class="col-sm-8">
                                <input id="bookName" name="bookName" th:value="${books.bookName}" class="form-control"
                                       type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">图书图片：</label>
                            <div class="col-sm-8" id="bookImgWrap">

                                <!--<img th:src="@{/img/iphone/image_2018_01_31/1ed28eb4-782f-4472-a24b-66b906a0e29a.jpg}" alt="图书">-->
                                <input id="bookImg" name="bookImg" th:value="${books.bookImg}" class="form-control"
                                       type="text">
                                <div class="layui-upload">
                                    <button type="button" class="layui-btn"  style="width: 50%;" id="bookimgs">
                                        <i class="fa fa-cloud"></i>批量上传
                                    </button>
                                    <!--<button type="button" class="layui-btn" id="test2">多图片上传</button>-->
                                    <blockquote class="layui-elem-quote layui-quote-nm">
                                        预览图：
                                        <div class="layui-upload-list" id="imgspreview"></div>
                                    </blockquote>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">作者：</label>
                            <div class="col-sm-8">
                                <input id="author" name="author" th:value="${books.author}" class="form-control"
                                       type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">分类：</label>
                            <div class="col-sm-8" >
                                <select  class="form-control" id="catId" name="catId">
                                    <option value="">请选择分类</option>
                                    <option th:each="category : ${categoryDOList}" th:text="${category.catName}" th:value="${category.catId}" th:selected="${category.catId == books.catId}"></option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group" hidden>
                            <label class="col-sm-3 control-label">规则id：</label>
                            <div class="col-sm-8">
                                <input id="rulerId" name="rulerId" th:value="${books.rulerId}" class="form-control"
                                       type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">出版社：</label>
                            <div class="col-sm-8">
                                <input id="press" name="press" th:value="${books.press}" class="form-control"
                                       type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">推荐：</label>
                            <div class="col-sm-8">
                                <label class="radio-inline">
                                    <input
                                            th:field="${books.isRecommend}" type="radio" name="isRecommend" value="1"/>
                                    推荐
                                </label>
                                <label class="radio-inline">
                                    <input
                                            th:field="${books.isRecommend}" type="radio" name="isRecommend" value="0"/>
                                    不推荐
                                </label>
                                <!--<input id="isRecommend" name="isRecommend" th:value="${books.isRecommend}" class="form-control" type="text">-->
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">最新：</label>
                            <div class="col-sm-8">
                                <label class="radio-inline">
                                    <input
                                            th:field="${books.isNewest}" type="radio" name="isRecommend" value="1"/>
                                    最新
                                </label>
                                <label class="radio-inline">
                                    <input
                                            th:field="${books.isNewest}" type="radio" name="isRecommend" value="0"/>
                                    陈旧
                                </label>
                                <!--<input id="isNewest" name="isNewest" th:value="${books.isNewest}" class="form-control" type="text">-->
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">图书简介：</label>
                            <div class="layui-input-block">
                                <textarea placeholder="请输入图书简介" class="layui-textarea" id="appear" name="appear" minlength="10" th:text="${books.appear}"></textarea>
                            </div>
                        </div>
                        <!--<div class="form-group">
                            <label class="col-sm-3 control-label">总数量：</label>
                            <div class="col-sm-8">
                                <input id="total" name="total" th:value="${books.total}" class="form-control" type="text">
                            </div>
                        </div>-->
                        <!--<div class="form-group">
                            <label class="col-sm-3 control-label">上传时间：</label>
                            <div class="col-sm-8">
                                <input id="upDate" name="upDate" th:value="${books.upDate}" class="form-control"
                                       type="text">
                            </div>
                        </div>-->
                        <!--<div class="form-group">
                            <label class="col-sm-3 control-label">冗余：</label>
                            <div class="col-sm-8">
                                <input id="redundance1" name="redundance1" th:value="${books.redundance1}"
                                       class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">冗余：</label>
                            <div class="col-sm-8">
                                <input id="redundance2" name="redundance2" th:value="${books.redundance2}"
                                       class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">冗余：</label>
                            <div class="col-sm-8">
                                <input id="redundance3" name="redundance3" th:value="${books.redundance3}"
                                       class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">冗余：</label>
                            <div class="col-sm-8">
                                <input id="redundance4" name="redundance4" th:value="${books.redundance4}"
                                       class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">冗余：</label>
                            <div class="col-sm-8">
                                <input id="redundance5" name="redundance5" th:value="${books.redundance5}"
                                       class="form-control" type="text">
                            </div>
                        </div>-->
                        <div class="form-group">
                            <div class="col-sm-8 col-sm-offset-3">
                                <button type="submit" class="btn btn-primary">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include::footer"></div>
<script type="text/javascript" src="/js/appjs/book/books/edit.js"></script>
    <script src="/js/layui.js"></script>
<script src="/js/plugins/layer/layer.min.js"></script>
<script>
    layui.use('upload', function () {
        var upload = layui.upload
            ,bookImg = '';
        //多图片上传
        upload.render({
            elem: '#bookimgs'
            , url: '/common/sysFile/upload'
            , multiple: true
            , accept: 'images'
            , size: 5120
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#imgspreview').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" ' +
                        'style="max-height: 100px;max-height: 100px;margin: 3px 3px 1px 5px;border: solid 1px lightslategray">');
                });
            }
            , done: function (res) {
                //上传完毕
//                alert(res.fileName);
                bookImg += res.fileName+",";
                $('#bookImg').val(bookImg);
                console.log(bookImg);

                layer.msg("successful!");
            }
            , error: function () {
                //请求异常回调
                layer.msg("please retry again!");
            }
        });
    });
</script>

</body>
</html>
